import * as React from 'react';
import { Alert, StyleSheet, TouchableOpacity, View, Dimensions, Text, ScrollView } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';
import { Pagination } from 'react-native-swiper-flatlist';
import { CustomPagination } from './CustomPagination'
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const { width, height } = Dimensions.get('window');
let widthLayout = 0;
// 轮播数据
const swiperData = [
  { id: '1', title: 'Screen 1', backgroundColor: 'tomato' },
  { id: '2', title: 'Screen 2', backgroundColor: 'skyblue' },
  { id: '3', title: 'Screen 3', backgroundColor: 'gold' },
  { id: '4', title: 'Screen 4', backgroundColor: 'lightgreen' },
  { id: '5', title: 'Screen 5', backgroundColor: 'violet' },
];

export default () => {
  const scrollRef = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef2 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef3 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef4 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef5 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef6 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef7 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const scrollRef8 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const goToLastIndex = () => {
    scrollRef.current?.goToLastIndex();
  };
  const goToFirstIndex = () => {
    scrollRef.current?.goToFirstIndex();
  };
  const goToSecondIndex = () => {
    scrollRef.current?.scrollToIndex({ index: 1 });
  };
  const getCurrentIndex = () => {
    const currentIndex = scrollRef.current?.getCurrentIndex();
    Alert.alert(`the current index is ${currentIndex}`);
  };
  const getPrevIndex = () => {
    const prevIndex = scrollRef.current?.getPrevIndex();
    Alert.alert(`the previous index is ${prevIndex}`);
  };

  const [currentIndex2, setCurrentIndex2] = React.useState(0);
  const [currentIndex3, setCurrentIndex3] = React.useState(0);
  const [currentIndex4, setCurrentIndex4] = React.useState(0);
  const [currentIndex5, setCurrentIndex5] = React.useState(0);
  const [currentIndex6, setCurrentIndex6] = React.useState(0);

  const renderSwiperItem = ({ item }) => (
    <View style={[styles.swiperItem, { backgroundColor: item.backgroundColor }]}>
      <Text style={styles.swiperText}>{item.title}</Text>
    </View>
  );

  const data = Array.from({ length: 50 }, (_, i) => `Page ${i + 1}`);
  const swiperRef = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const swiperRef2 = React.useRef<React.ComponentRef<typeof SwiperFlatListWithGestureHandler>>(null);
  const renderItem = ({ item, index }) => {
    return (
      <View style={[styles.swiperItem, {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: index % 2 === 0 ? '#f0f0f0' : '#e0e0e0' // 交替背景色便于区分
      }]}>
        <Text style={{ fontSize: 24 }}>{item}</Text>
        <Text style={{ fontSize: 12, color: 'red', marginTop: 10 }}>
          索引: {index}
        </Text>
      </View>
    );
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Tester>
        <TestSuite name="react-native-swiper-flatlist">
          <ScrollView>
            {/* 基础功能测试 */}
            <TestCase itShould="基础水平轮播 (默认) + 自动化测试id (e2eID)">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData}
                  renderItem={renderSwiperItem}
                  showPagination
                  autoplay
                  autoplayDelay={3}
                  e2eID="Test1"
                  vertical={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="使用children属性">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  showPagination
                  autoplay
                  autoplayDelay={2}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                >
                  <View style={[styles.swiperItem, { backgroundColor: 'red' }]}>
                    <Text style={styles.swiperText}>Child 1</Text>
                  </View>
                  <View style={[styles.swiperItem, { backgroundColor: 'green' }]}>
                    <Text style={styles.swiperText}>Child 2</Text>
                  </View>
                  <View style={[styles.swiperItem, { backgroundColor: 'blue' }]}>
                    <Text style={styles.swiperText}>Child 3</Text>
                  </View>
                </SwiperFlatListWithGestureHandler>
              </View>
            </TestCase>
            <TestCase itShould="自定义起始索引 (index=1)">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData}
                  renderItem={renderSwiperItem}
                  index={1}
                  showPagination
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义起始索引 (index=2)  + showPagination = {false} + data = 5">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData}
                  renderItem={renderSwiperItem}
                  index={2}
                  showPagination={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="预渲染单个项目 (renderItem) + data = 3 + showPagination = {true}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination={true}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="预渲染所有项目 (renderAll={true})">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={swiperRef}
                  renderAll={true}
                  data={data}
                  showPagination
                  renderItem={renderItem}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="不预渲染所有项目 (renderAll={false})">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={swiperRef2}
                  renderAll={false}
                  data={data}
                  showPagination
                  renderItem={renderItem}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="启用手势 (disableGesture = {false}) + showPagination={false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  disableGesture={false}
                  showPagination={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="启用手势 (disableGesture = {false}) + showPagination={true}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  disableGesture={false}
                  showPagination={true}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="禁用手势 (disableGesture = {true}) + 禁用自动播放功能 autoplay= {false} + autoplayLoop= {false} ">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  disableGesture={true}
                  showPagination
                  autoplay={false}
                  autoplayLoop={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            {/* 自动播放功能测试 */}
            <TestCase itShould="自动播放+循环 (autoplay= {true} + autoplayLoop= {true} + autoplayDelay= {1} + autoplayLoopKeepAnimation= {false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  autoplay={true}
                  autoplayLoop={true}
                  autoplayDelay={1}
                  showPagination={true}
                  autoplayLoopKeepAnimation={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="自动播放+不循环 (autoplay= {true} + autoplayLoop= {false} + autoplayDelay= {1} + autoplayLoopKeepAnimation= {false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  autoplay={true}
                  autoplayLoop={false}
                  autoplayDelay={1}
                  showPagination={true}
                  autoplayLoopKeepAnimation={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="循环保持动画关闭 (autoplay= {true} + autoplayLoop= {true} + autoplayDelay= {1} + autoplayLoopKeepAnimation= {false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  autoplay={true}
                  autoplayDelay={1}
                  showPagination={true}
                  autoplayLoop={true}
                  autoplayLoopKeepAnimation={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="循环保持动画 (autoplayLoopKeepAnimation true) + autoplayDelay= {4} +autoplayLoopKeepAnimation= {true} + autoplayInvertDirection = {false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  autoplay
                  autoplayLoopKeepAnimation={true}
                  autoplayDelay={4}
                  showPagination
                  autoplayLoop={true}
                  autoplayInvertDirection={false}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="反向自动播放 (autoplayInvertDirection) = {true}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  autoplay
                  index={2}
                  autoplayInvertDirection={true}
                  autoplayDelay={2}
                  showPagination
                  autoplayLoop={true}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            {/* 分页器测试 */}
            <TestCase itShould="自定义分页组件1 Pagination">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef5}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  // showPagination
                  onChangeIndex={({ index }) => setCurrentIndex5(index)}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
                <Pagination
                  size={(swiperData.slice(0, 3)).length}
                  scrollToIndex={({ index }) => {
                    scrollRef5.current?.scrollToIndex({ index })
                  }}
                  paginationIndex={currentIndex5} // 当前激活的索引
                  paginationStyleItemActive={{ backgroundColor: 'green' }}
                  paginationStyleItemInactive={{ backgroundColor: 'black' }}
                  paginationStyle={{ bottom: 5 }}
                  paginationStyleItem={{ width: 10, height: 10, marginHorizontal: 5 }}
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页组件2 Pagination">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef6}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  // showPagination
                  onChangeIndex={({ index }) => setCurrentIndex6(index)}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
                <Pagination
                  size={(swiperData.slice(0, 3)).length}
                  scrollToIndex={({ index }) => {
                    scrollRef6.current?.scrollToIndex({ index })
                  }}
                  paginationIndex={currentIndex6} // 当前激活的索引
                  paginationStyleItemActive={{ backgroundColor: 'yellow' }}
                  paginationStyleItemInactive={{ backgroundColor: 'white' }}
                  paginationStyle={{ bottom: 15 }}
                  paginationStyleItem={{ width: 20, height: 20, marginHorizontal: 10 }}
                />
              </View>
            </TestCase>

            <TestCase itShould="自定义分页器 scrollToIndex 方法">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef4}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  onChangeIndex={({ index }) => setCurrentIndex4(index)}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
                <Pagination
                  size={(swiperData.slice(0, 3)).length}
                  scrollToIndex={({ index }) => {
                    scrollRef4.current?.scrollToIndex({ index })
                    Alert.alert(`scrollToIndex: ${index}`)
                  }}
                  paginationIndex={currentIndex4} // 当前激活的索引
                  paginationActiveColor="blue"
                  paginationDefaultColor="gray"
                  e2eID="swiper-flatlist-test"
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页器 Pagination + size = 3 + e2eID:swiper-flatlist-test + paginationIndex = 1 + onPaginationSelectedIndex + paginationTapDisabled = {false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef2}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  onChangeIndex={({ index }) => setCurrentIndex3(index)}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
                <Pagination
                  size={(swiperData.slice(0, 3)).length}
                  scrollToIndex={({ index }) => { scrollRef2.current?.scrollToIndex({ index }) }}
                  paginationIndex={1} // 当前激活的索引
                  paginationActiveColor="green"
                  paginationTapDisabled={false}
                  paginationDefaultColor="pink"
                  onPaginationSelectedIndex={() => { Alert.alert('用户点击了分页器') }}
                  e2eID="swiper-flatlist-test"
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页器 Pagination + size = 2 e2eID=swiper-flatlist-test6 + paginationIndex={currentIndex2} + paginationTapDisabled = {true} ">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef3}
                  data={swiperData.slice(0, 2)}
                  renderItem={renderSwiperItem}
                  showPagination
                  onChangeIndex={({ index }) => setCurrentIndex2(index)}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
                <Pagination
                  size={(swiperData.slice(0, 2)).length}
                  scrollToIndex={({ index }) => { scrollRef3.current?.scrollToIndex({ index }) }}
                  paginationIndex={currentIndex2} // 当前激活的索引
                  paginationTapDisabled={true}
                  paginationActiveColor="blue"
                  paginationDefaultColor="gray"
                  e2eID="swiper-flatlist-test6"
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页颜色1 paginationActiveColor + paginationDefaultColor + e2eID">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  paginationActiveColor="red"
                  paginationDefaultColor="gray"
                  e2eID="swiper-flatlist-test"
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页颜色2 paginationActiveColor + paginationDefaultColor + e2eID">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  paginationActiveColor="pink"
                  paginationDefaultColor="black"
                  e2eID="swiper-flatlist-test2"
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="使用分页点击 (onPaginationSelectedIndex)">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  ref={scrollRef}
                  showPagination
                  renderItem={renderSwiperItem}
                  onPaginationSelectedIndex={() => { Alert.alert('用户点击了分页器') }}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="禁用分页点击 (paginationTapDisabled = true)">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  paginationTapDisabled={true}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            {/* 自定义样式 */}
            <TestCase itShould="自定义分页样式1 paginationStyle + paginationStyleItem + paginationStyleItemActive + paginationStyleItemActive">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  paginationStyle={{ bottom: 20 }}
                  paginationStyleItem={{ width: 10, height: 10, marginHorizontal: 5 }}
                  paginationStyleItemActive={{ backgroundColor: 'yellow' }}
                  paginationStyleItemInactive={{ backgroundColor: 'white' }}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="自定义分页样式2 paginationStyle + paginationStyleItem + paginationStyleItemActive + paginationStyleItemActive">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  paginationStyle={{ bottom: 15 }}
                  paginationStyleItem={{ width: 20, height: 20, marginHorizontal: 10 }}
                  paginationStyleItemActive={{ backgroundColor: 'blue' }}
                  paginationStyleItemInactive={{ backgroundColor: 'green' }}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="自定义分页器样式 PaginationComponent paginationActiveColor + paginationDefaultColor">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  PaginationComponent={CustomPagination}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>
            <TestCase itShould="PaginationComponent">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  PaginationComponent={(props) => (
                    <Pagination
                      {...props}
                      paginationStyleItemActive={{ backgroundColor: 'yellow' }}
                      paginationStyleItemInactive={{ backgroundColor: 'white' }}
                      paginationStyle={{ bottom: 15 }}
                      paginationStyleItem={{ width: 20, height: 20, marginHorizontal: 10 }}
                    />
                  )}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="PaginationComponent2">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  PaginationComponent={(props) => (
                    <Pagination
                      {...props}
                      paginationStyle={{ bottom: 5 }}
                      paginationStyleItem={{ width: 10, height: 10, marginHorizontal: 5 }}
                      paginationStyleItemActive={{ backgroundColor: 'pink' }}
                      paginationStyleItemInactive={{ backgroundColor: 'black' }}
                    />
                  )}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            {/* onMomentumScrollEnd 测试 */}
            <TestCase itShould="滚动结束回调 (onMomentumScrollEnd)">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef8}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  onMomentumScrollEnd={() => { Alert.alert('滚动结束回调') }}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            <TestCase itShould="索引变化回调 (onChangeIndex)">
              <View style={styles.swiperContainer}
                onLayout={(event) => {
                  widthLayout = event.nativeEvent.layout.width;
                }}>
                <SwiperFlatListWithGestureHandler
                  ref={scrollRef7}
                  data={swiperData.slice(0, 3)}
                  renderItem={renderSwiperItem}
                  showPagination
                  onChangeIndex={({ index, prevIndex }) => {
                    if (prevIndex !== undefined && index !== undefined && prevIndex !== index) {
                      console.log(`Index changed from ${prevIndex} to ${index}`);
                      Alert.alert(`页面从 ${prevIndex} 切换到 ${index}`)
                    }
                  }}
                  getItemLayout={(data, index) => ({
                    length: widthLayout,  // 每个项目的固定宽度
                    offset: widthLayout * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                />
              </View>
            </TestCase>

            {/* Ref 控制测试 */}
            <TestCase itShould="程序化控制 (使用Ref) + paginationTapDisabled={false}">
              <View style={styles.swiperContainer}>
                <SwiperFlatListWithGestureHandler
                  showPagination
                  ref={scrollRef}
                  index={2}
                  paginationTapDisabled={false}
                  onChangeIndex={({ index, prevIndex }) => {
                    console.log('example', { index, prevIndex });
                  }}
                  getItemLayout={(data, index) => ({
                    length: styles.swiperContainer.width,  // 每个项目的固定宽度
                    offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                    index: index,
                  })}
                >
                  <TouchableOpacity
                    style={[styles.swiperItem, { backgroundColor: 'salmon' }]}
                    onPress={goToLastIndex}
                  >
                    <Text style={styles.text}>0 - Go to last index</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.swiperItem, { backgroundColor: 'skyblue' }]}
                    onPress={getPrevIndex}
                  >
                    <Text style={styles.text}>1 - Press to get the previous index</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.swiperItem, { backgroundColor: 'tomato' }]}
                    onPress={getCurrentIndex}
                  >
                    <Text style={styles.text}>2 - Press to get the current index</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.swiperItem, { backgroundColor: 'skyblue' }]}
                    onPress={goToSecondIndex}
                  >
                    <Text style={styles.text}>3 - Go to the second index</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.swiperItem, { backgroundColor: 'teal' }]}
                    onPress={goToFirstIndex}
                  >
                    <Text style={styles.text}>4 - Go to first index</Text>
                  </TouchableOpacity>
                </SwiperFlatListWithGestureHandler>
              </View>
            </TestCase>
            <TestCase itShould="填充空位">
              <View style={styles.swiperContainer}>
              </View>
            </TestCase>
          </ScrollView>
        </TestSuite>
      </Tester>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({

  swiperContainer: {
    width: width * 0.7,
    height: height * 0.3,
    alignSelf: 'center',
    borderColor: '#ddd',
    borderRadius: 10,
  },
  swiperItem: {
    width: width * 0.7,
    height: height * 0.3,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  swiperText: {
    fontSize: 24,
    color: 'white',
    fontWeight: 'bold',
  },
  child: {
    height: height * 0.5,
    width,
    justifyContent: 'center',
  },
  text: {
    fontSize: width * 0.1,
    textAlign: 'center',
  },
  indexText: {
    fontSize: 11,
    backgroundColor: 'transparent',
    textAlign: 'center',
    fontWeight: 'bold',
  },
});